<template>
    <div class="DataCard-container">
        <el-col :span="8">
            <el-row class="icon" :style="{background: color}" type="flex" justify="center" align="middle">
                <i :class="iconType"></i>
            </el-row>
        </el-col>
        <el-col :span="16">
            <el-row class="info" type="flex" justify="center" align="middle">
                <div class="info-count">
                    <p class="info-intro-count" :id="idName">
                        <count-to :endVal='endVal' :duration='3000'></count-to>
                    </p>
                    <p class="info-intro-text">{{ infoText }}</p>
                </div>
            </el-row>
        </el-col>
    </div>
</template>

<script>
    import countTo from 'vue-count-to'
    export default {
        name: 'DataCard',
        components: {countTo},
        props: {
            idName: String,
            infoText: String,
            color: String,
            iconType: String,
            endVal: {
                type: Number,
                default: 0
            }
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .DataCard-container{
        .el-col{
            height: 100px;
            background: #fff;
            .icon{
                height: 100%;
                font-size: 40px;
                color: white;
                background-color: rgb(45, 140, 240);
            }
            .info{
                height: 100%;
                .info-count{
                    p{
                        margin: 0;
                    }
                    .info-intro-count{
                        text-align: center;
                        color: rgb(45, 140, 240);
                        font-size: 30px;
                        font-weight: 700;
                    }
                    .info-intro-text{
                        font-size:12px;
                        font-weight:500;
                        color:#C8C8C8;
                    }
                }

            }
        }
    }
</style>